import 'package:flutter/material.dart';

class AlignmentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Row with different MainAxisAlignment
            _buildSectionTitle('Row MainAxisAlignment'),
            _buildContainer(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: _buildTextWidgets("Start"),
              ),
            ),
            _buildContainer(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: _buildTextWidgets("Center"),
              ),
            ),
            _buildContainer(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: _buildTextWidgets("End"),
              ),
            ),
            _buildContainer(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: _buildTextWidgets("Space Between"),
              ),
            ),
            _buildContainer(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: _buildTextWidgets("Space Around"),
              ),
            ),
            _buildContainer(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _buildTextWidgets("Space Evenly"),
              ),
            ),

            SizedBox(height: 24),

            // Row with different CrossAxisAlignment
            _buildSectionTitle('Row CrossAxisAlignment'),
            _buildContainer(
              height: 100,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: _buildMultiLineTextWidgets("Start"),
              ),
            ),
            _buildContainer(
              height: 100,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: _buildMultiLineTextWidgets("Center"),
              ),
            ),
            _buildContainer(
              height: 100,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: _buildMultiLineTextWidgets("End"),
              ),
            ),
            _buildContainer(
              height: 100,
              color: Colors.blue[50],
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: _buildMultiLineTextWidgets("Stretch"),
              ),
            ),

            SizedBox(height: 24),

            // Column with different MainAxisAlignment
            _buildSectionTitle('Column MainAxisAlignment'),
            _buildContainer(
              height: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: _buildTextWidgets("Start"),
              ),
            ),
            _buildContainer(
              height: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: _buildTextWidgets("Center"),
              ),
            ),
            _buildContainer(
              height: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: _buildTextWidgets("End"),
              ),
            ),
            _buildContainer(
              height: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: _buildTextWidgets("Space Between"),
              ),
            ),
            _buildContainer(
              height: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: _buildTextWidgets("Space Around"),
              ),
            ),
            _buildContainer(
              height: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: _buildTextWidgets("Space Evenly"),
              ),
            ),

            SizedBox(height: 24),

            // Column with different CrossAxisAlignment
            _buildSectionTitle('Column CrossAxisAlignment'),
            _buildContainer(
              height: 200,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: _buildMultiLineTextWidgets("Start"),
              ),
            ),
            _buildContainer(
              height: 200,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: _buildMultiLineTextWidgets("Center"),
              ),
            ),
            _buildContainer(
              height: 200,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: _buildMultiLineTextWidgets("End"),
              ),
            ),
            _buildContainer(
              height: 200,
              color: Colors.blue[50],
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: _buildMultiLineTextWidgets("Stretch").map((widget) {
                  return Container(
                    color: Colors.blue[100],
                    child: widget,
                  );
                }).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // Helper methods
  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Text(
        title,
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.blue[700]),
      ),
    );
  }

  Widget _buildContainer({
    required Widget child,
    double? height,
    Color? color,
  }) {
    return Container(
      height: height,
      margin: const EdgeInsets.only(bottom: 12),
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: color ?? Colors.grey[100],
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(8),
      ),
      child: child,
    );
  }

  List<Widget> _buildTextWidgets(String prefix) {
    return [
      Text("$prefix", style: TextStyle(fontWeight: FontWeight.bold)),
      Container(width: 10), // Spacer
      Text("Hello", style: TextStyle(color: Colors.red)),
      Text("World", style: TextStyle(color: Colors.green)),
      Container(width: 10), // Spacer
      Text("Flutter", style: TextStyle(color: Colors.blue)),
    ];
  }

  List<Widget> _buildMultiLineTextWidgets(String prefix) {
    return [
      Text("$prefix\nAlignment", style: TextStyle(fontWeight: FontWeight.bold)),
      Container(width: 20), // Spacer
      Text("Hello\nWorld", style: TextStyle(color: Colors.red)),
      Text("Flutter\nWidgets", style: TextStyle(color: Colors.green)),
    ];
  }
}